import './index.scss'
import { useState, createContext, useContext } from 'react'
import Profile from '@/components/Profile'
import MySwiper from '@/components/MySwiper'
import MyMenu from '@/components/MyMenu'
import MyTable from '@/components/MyTable'
import Footer from '@/components/Footer'

export const Context = createContext()

const Home = () => {
  const [data, setData] = useState([])

  const updateData = (newData) => {
    setData(newData)
  }

  return (
    <Context.Provider value={data}>
      <div className="home">
        <div className="home-container content-container">
          <div className="left small-screen-hide">
            <Profile />
          </div>
          <div className="right">
            <MySwiper />
          </div>
        </div>

        <div className="menu-container content-container">
          <div className="left ">
            <MyMenu updateData={updateData} />
          </div>
          <div className="right small-screen-hide">
            <MyTable />
          </div>
        </div>
      </div>
      <Footer />
    </Context.Provider>
  )
}

export default Home
